<script lang="ts" setup name="AppMenuServiceIndex">
import { ref, reactive } from "vue";
import AppMenuTreeTable from "./component/app-menu-tree-table.vue";
import appMenuTreeDialog from "./component/app-menu-tree-dialog.vue";
import appMenuServiceApi from "@/api/modules/org/bean/app-menu";
import { ElMessage } from "element-plus";
import { SYSTEM_CONFIG } from "@/config/system";

const AppMenuTreeTableRef = ref();
const appMenuTreeDialogRef = ref();
const AppMenuIndexState = reactive({
  visible: false,
  addItems: () => {
    AppMenuIndexState.visible = true;
  },
  getCheckedNode: (nodes: any[], btn: any[]) => {
    if (nodes.length > 0 && btn.length > 0) {
      // 筛选掉父级节点
      nodes = nodes.filter((e: any) => e.children.length == 0);
      const list: any[] = [];
      // 定义需要添加的按钮
      const data = btn;
      // 遍历并添加需要插入的信息

      nodes.forEach((e: any) => {
        data.forEach((item: any, index: number) => {
          list.push({
            menuName: `${e.text}${item.name}`,
            menuCode: `${e.attributes.menuCode}:${item.code}`,
            parentMenuId: e.id.substring(0, e.id.indexOf(",")),
            pagePoint: true,
            orderNum: (index + 1) * 10,
            menuChief: true,
            compId: "application",
            templateId: SYSTEM_CONFIG.APP_ID
          });
        });
      });
      //批量插入信息
      appMenuServiceApi.saveMulti({ insert: list }).then((res: any) => {
        if (res.data.success) {
          ElMessage.success({ message: "操作成功", type: "success" });
          AppMenuIndexState.visible = false;
          AppMenuTreeTableRef.value.loadTreeData();
        }
      });
    } else {
      ElMessage({ type: "warning", message: "至少选择一个子菜单和一个按钮" });
    }
  }
});
</script>
<template>
  <div class="AppMenuServiceIndex">
    <app-menu-tree-table ref="AppMenuTreeTableRef" @add-items="AppMenuIndexState.addItems"></app-menu-tree-table>
    <app-menu-tree-dialog
      ref="appMenuTreeDialogRef"
      v-model:visible="AppMenuIndexState.visible"
      @save-success="AppMenuIndexState.getCheckedNode"
    ></app-menu-tree-dialog>
  </div>
</template>
